﻿<%@ Page Title="电池组图形报表分析" Language="C#" MasterPageFile="~/Web/Main.Master" AutoEventWireup="true" CodeBehind="GroupHistoryPic.aspx.cs" Inherits="BOMS.WebUI.Web.DataAnalyse.GroupHistoryPic" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="../amcharts/images/style.css" type="text/css" />
        <script src="../amcharts/amcharts/amcharts.js" type="text/javascript"></script>         
        <script type="text/javascript">
            $(document).ready(function () {
                init();
            });
            var chart;
            var average = 0;
            function init() {
                var strChartData = $("#<%=JsonData1.ClientID %>").val();
                // alert(strChartData);
                if (strChartData != "") {
                    var strJsonObj = strChartData.replace(/\"\\\/(Date\(\d+\))\\\/\"/g, "new $1");
                    var jsonObj = eval(strJsonObj);

                    var valType = $("input:radio[name$=rbl][checked]").val();
                    var chartType = $("select[name$=drpChartType]").val();

                    if (chartType == "Line")
                        AmChartsBind_line(jsonObj, valType);
                    else if (chartType == "Column")
                        AmChartsBind_column(jsonObj, valType);
                }
            }

            function AmChartsBind_line(chartData, valType) {

                //            // SERIAL CHART    
                //                chart = new AmCharts.AmSerialChart();
                //                chart.pathToImages = "../amcharts/images/";
                //                chart.zoomOutButton = {
                //                    backgroundColor: '#000000',
                //                    backgroundAlpha: 0.15
                //                };
                //                chart.dataProvider = chartData;
                //                chart.categoryField = "Time";

                //                // AXES
                //                // category
                //                var categoryAxis = chart.categoryAxis;
                //                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                //                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                //                categoryAxis.dashLength = 1;
                //                categoryAxis.gridAlpha = 0.15;
                //                categoryAxis.axisColor = "#DADADA";

                //                // value                
                //                var valueAxis = new AmCharts.ValueAxis();
                //                valueAxis.axisColor = "#DADADA";
                //                valueAxis.dashLength = 1;
                //                valueAxis.logarithmic = false; // this line makes axis logarithmic
                //                chart.addValueAxis(valueAxis);

                //                // GUIDE for average
                //                var guide = new AmCharts.Guide();
                //                guide.value = average;
                //                guide.lineColor = "#CC0000";
                //                guide.dashLength = 4;
                //               // guide.label = "average";
                //                guide.inside = true;
                //                guide.lineAlpha = 1;
                //                valueAxis.addGuide(guide);


                //                // GRAPH
                //                var graph = new AmCharts.AmGraph();
                //                graph.type = "smoothedLine";
                //                graph.bullet = "round";
                //                graph.bulletColor = "#FFFFFF";
                //                graph.bulletBorderColor = "#00BBCC";
                //                graph.bulletBorderThickness = 2;
                //                graph.bulletSize = 7;
                //                graph.title = "Value";
                //                graph.valueField = valType;
                //                graph.lineThickness = 2;
                //                graph.lineColor = "#00BBCC";
                //                chart.addGraph(graph);

                //                // CURSOR
                //                var chartCursor = new AmCharts.ChartCursor();
                //                chartCursor.cursorPosition = "mouse";
                //                chart.addChartCursor(chartCursor);

                //                // SCROLLBAR
                //                var chartScrollbar = new AmCharts.ChartScrollbar();
                //                chart.addChartScrollbar(chartScrollbar);

                //                // WRITE
                //                chart.write("chartdiv");
                // SERIAL CHART    
                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "../amcharts/amcharts/images/";
                chart.zoomOutButton = {
                    backgroundColor: '#000000',
                    backgroundAlpha: 0.15
                };
                chart.dataProvider = chartData;
                chart.categoryField = "Time";
                chart.balloon.bulletSize = 5;

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                categoryAxis.dashLength = 1;
                categoryAxis.gridAlpha = 0.15;
                categoryAxis.position = "top";
                categoryAxis.axisColor = "#DADADA";

                // value                
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                valueAxis.dashLength = 1;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.title = "red line";
                graph.valueField = valType;
                graph.bullet = "round";
                graph.bulletBorderColor = "#FFFFFF";
                graph.bulletBorderThickness = 2;
                graph.lineThickness = 2;
                graph.lineColor = "#00BBCC";
                graph.negativeLineColor = "#efcc26";
                graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
                chart.addGraph(graph);

                // CURSOR
                chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorPosition = "mouse";
                chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // WRITE
                chart.write("chartdiv");
            };

            function AmChartsBind_column(chartData, valType) {
                // SERIAL CHART

                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "Time";
                chart.startDuration = 1;

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.labelRotation = 90;
                categoryAxis.gridPosition = "start";
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD";
                // value
                // in case you don't want to change default settings of value axis,
                // you don't need to create it, as one value axis is created automatically.

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.valueField = valType;
                graph.balloonText = "[[category]]: [[value]]";
                graph.type = "column";
                graph.lineAlpha = 0;
                graph.fillAlphas = 0.8;
                chart.addGraph(graph);

                chart.write("chartdiv");
            }
        </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table class="usertableborder" cellspacing="1" cellpadding="3" width="96%" align="center" border="0">
        <tr>
            <th colspan="5"><asp:Label runat="server" ID="lbIntro"></asp:Label></th>
        </tr>
        <tr>
            <td class="protablerow3" align="right" width="5%">
                Y轴显示：
            </td>
            <td class="protablerow1" align="left" width="15%">
                <asp:RadioButtonList ID="rbl" runat="server" AutoPostBack="false" RepeatDirection="Horizontal">
                    <asp:ListItem Value="Vval" Selected="True">组电压</asp:ListItem>
                    <asp:ListItem Value="Ival">组电流</asp:ListItem>
                    <asp:ListItem Value="CapFree">剩余容量</asp:ListItem>
                </asp:RadioButtonList>
            </td>
            <td class="protablerow3" align="right" width="5%">
                图形类型：
            </td>
            <td class="protablerow1" align="left" width="10%">
                <asp:DropDownList runat="server" ID="drpChartType">
                    <asp:ListItem Text="曲线图" Value="Line"></asp:ListItem>
                    <asp:ListItem Text="柱形状" Value="Column"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td class="protablerow3" align="right" width="5%" style="display:none;">
                X轴点数：
            </td>
            <td class="protablerow1" align="left" width="6%"  style="display:none;">
                <asp:TextBox runat="server" ID="tbxXPointCount" Style="width: 35px;" Text="30"></asp:TextBox>
                <span id="spCountTip" runat="server">(5~50)</span>
            </td>
            <td class="usertablerow1" align="left" width="10%">
                <asp:Button ID="SingleBtn" runat="server" Text="生 成" class="btnbg" OnClick="SingleBtn_Click" /><input
                    type="button" value="返 回" onclick="location.href='groupHistory.aspx'" class="btnbg" />
            </td>
        </tr>
        <tr>
            <td class="protablerow2" colspan="5">说明：请选择Y轴显示的数据参数，点击【生成】按钮即可生成电池组对应的图形报表数据！</td>
        </tr>
    </table>    
    <table class="usertableborder" cellspacing="1" cellpadding="3" width="96%" align="center" border="0">
        <tr style="display:none;">
            <td class="usertablerow3" width="80%">
                <table>
                    <tr>
                        <td><asp:LinkButton runat="server" ID="lnbBeForeChart" Text="前一页" CommandName="Preview" Visible="false"></asp:LinkButton></td>
                        <td><asp:LinkButton runat="server" ID="lnbBehindChart" Text="后一页" CommandName="Nextview" Visible="false"></asp:LinkButton></td>
                        <td><asp:Label runat="server" ID="lbCurPageNO"></asp:Label></td>
                    </tr>
                </table>
                <asp:HiddenField runat="server" ID="hdfCurrentPageIndex" Value="0" />
            </td>
        </tr>                      
        <tr>
            <td align="center">
                <table width="100%" border="0" cellspacing="1" cellpadding="2">
                    <tr>
                        <td width="100%">
                        <div id="chartdiv" style="width:100%;height:380px;">
                            <table runat="server" id="tblBtnImgs" align="center" border="0" width="50%" height="100%">
                                <tr>
                                    <td width="40%" align="center">
                                        <img id="BtnQxt" src="/Images/qxt.jpg" style="border-width: 0px;" alt="曲线图" />
                                    </td>
                                    <td width="20%" align="center">
                                        <font style="font-size: 18px; font-family: 微软雅黑;"><span id="Label1">图形展示</span></font>
                                    </td>
                                    <td width="40%" align="center">
                                        <img id="BtnZxt" src="/Images/zxt.jpg" style="border-width: 0px;" alt="柱状图" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <asp:TextBox ID="JsonData1"  runat="server" ClientIDMode="Static" Visible="True" style="display:none"></asp:TextBox> 
</asp:Content>